import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

//引入elementui
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";

// 引入animate动画
import animated from "animate.css";
// 引入公共样式
import "@/assets/css/index.scss";
// 引入字体图标  im
import "@/assets/css/icon.css";
// 引入侧边栏插件
import qfSubMenu from "dist22";

import bus from "@/utils/eventBus.js";

//导入
import NProgress from "nprogress";
import "nprogress/nprogress.css";
Vue.prototype.$bus = bus;
Vue.config.productionTip = false;
Vue.use(ElementUI);
Vue.use(animated);
// Vue.use(qfSubMenu)
Vue.use(qfSubMenu);
// 增加登录页面粒子特效
import VueParticles from "vue-particles";
Vue.use(VueParticles);
// 引入按钮鉴权方法
import hashas from "@/utils/hashas.js";
Vue.prototype.$has = hashas; //添加到原型 以后所有的按钮都可以鉴权使用
// 定义全局自定义指令 判断是否具备响应按钮权限
Vue.directive("has", {
  bind(el, binding, VNode) {
    let btns = localStorage.getItem("qq-permission");
    // console.log('我是elelelee',el);
    // console.log('我是binding',binding);
    if (!hashas(btns, binding.value)) {
      // 禁用按钮
      // 先储存class类名 在这基础上加上is-disabled禁用按钮
      let className = el.className;
      el.className = className + " " + "is-disabled";
      el.disabled = true;
    }
  },
});
// 路由守卫(前置守卫)
// 核心 路由全局前置钩子 beforeEach
// 全局前置钩子 三个参数 to(router即将进入的路由对象) from(当前导航即将离开的路由)
// next()释放控制权的一个函数 进行管道中的下一个钩子 如果钩子全部执行完了 则导航的状态就是confirmed(确认的)

router.beforeEach(function (to, from, next) {
  NProgress.start(); //进度条出现
  // console.log(to);
  // console.log(from);
  // 主要是拦截用户非法登录 先判断本地存储中是否有token 然后判断当前访问的页面是不是登录页 是就放行 不是就需要验证token 如果都没有的话 就会直接跳转登录页
  let token = localStorage.getItem("qq-token");
  if (to.path === "/login") {
    next();
  } else {
    if (token) {
      // 判断vuex中 store里面的sideMenu数组的长度是否为0 如果是 重新调用action中的获取永华菜单的方法 计算用户菜单 并且渲染

      // 出现问题: 登录进入 刷新页面 页面数据消失怎么办
      // 问题原因: 因为计算出来的菜单 是保存在vuex中state存储状态中定义的数组里面 刷新之后 因为vuex终究是一个js文件 重新刷新后 代码从上到下依次执行一次  这个时候state 中的数组会重新初始化为空数组 就没有用户的菜单在里面 因此 也就没有用户的路由在里面 所以就会出现空白页面
      // 解决方案:
      // 1 一般情况下可以把静态数据存储在localStorage里面
      // 2  也可以放在全局的前置钩子beforeEach中
      let { sideMenu } = store.state;
      if (sideMenu && sideMenu.length === 0) {
        // 调用actions中获取菜单的方法 通过dispath去触发
        store.dispatch("FETCH_MENULIST").then(() => {
          // 放行
          next({ path: to.path }); //next 里面要传入参数 即要进入的页面的路由信息 next传参后 当前要进入的路由会被废止 转而进入参数对应的路由 虽然是同一个路由 但是 这么做是为了确保addRoutes路由生效
        });
      } else {
        next();
      }
    } else {
      next({ path: "/login" });
    }
  }
});

// 全局后置钩子
router.afterEach((to, from) => {
  NProgress.done(); //进度条消失
  // 去掉第0项
  let breadCrumb = [...to.matched];
  breadCrumb.splice(0, 1);
  store.commit("SET_BREADCRUMB", breadCrumb);
});
new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");
